<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	    <meta content="telephone=no" name="format-detection" />
	    <meta content="email=no" name="format-detection" />
	    <meta name="apple-mobile-web-app-capable" content="yes">
	    <meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>血糖仪</title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="${wechatres}/css/lib/mui.min.css">
		<link rel="stylesheet" type="text/css" href="${wechatres}/css/lib/mui.picker.min.css" />
		<link rel="stylesheet" href="${wechatres}/css/common/base.css"/>
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="${wechatres}/css/lib/app.css" />
		<link rel="stylesheet" href="${wechatres}/css/common/common.css" />
		<link rel="stylesheet" href="${wechatres}/css/module/icon.css" />
		<link rel="stylesheet" href="${wechatres}/css/module/drag.css" />
		<script src="${wechatres}/script/libs/jquery-1.11.1.js"></script>
		<script src="${wechatres}/script/plugs/mui.min.js"></script>
		<script src="${wechatres}/script/plugs/mui.picker.min.js"></script>
		<script src="${wechatres}/script/views/common.js"></script>
		<script src="${wechatres}/script/views/drag.js"></script>
		<script type="text/javascript">
		var count = 0;
   		function searchFamily(method){
   			var userId = "${family.userId}";
   			if(method == '+'){
   				count++;
   			}else{
   				count--;
   			}
   			if(count < 0){
   				count = 0;
   				return;
   			}
   			$.get('${URL_WECHAT_SEARCHFAMILY}',
   					{
   						userId:userId,
   						count:count
   					},
   					function(data,status){
   						if(data.success == true){
   							if(data.data.userImage == null){
   							 	$("#family_userImage").attr("src","${wechatres}/img/img_user_initial.png");
   							}else{
   								$("#family_userImage").attr("src","data:image/png;base64,"+data.data.userImage);
   							}
   							$("#family_realname").html(data.data.realname);		
   							$("#IDCard").val(data.data.idCard);
   							search();
   						}else{
   							count--;
   						}
   					});
   		}
			
		</script>
	</head>
	<body>
		<!-- <header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"><i>返回</i></a>
			<h1 class="mui-title">血糖仪</h1>
		</header> -->
		<div class="mui-content">
			<!--<a href="https://www.baidu.com">1246</a>-->
			<div id="drag">
				
				<div class="mask">
					<ul class="link">
						<li><a id="hardware" href="${URL_WECHAT_TOMAIN}">健康数据</a></li>
						<li><a id="smart" href="${URL_WECHAT_TOMAIN}">智能导诊</a></li>
						<li><a id="personal" href="${URL_WECHAT_TOPERSONAL}">个人中心</a></li>
					</ul>
					<!--<a href="https://www.baidu.com">4465656</a>-->
				</div>
				
		    </div>
			<div class="mui-content-padded message">
				<div class="potrait">
					<a class="left_btn" onclick="searchFamily('-')"></a>
					<a class="right_btn" onclick="searchFamily('+')"></a>
					<img src="data:image/png;base64,${family.userImage}" class="user" id="family_userImage"/>
					<h3 id="family_realname">${family.realname}</h3>
					<input type="hidden" id="IDCard" name="IDCard" value="${family.idCard}" />
				</div>
				<div class="timeRange">
					<h5 class="timeSelect">时间范围</h5>
					<button id='fromTime' name="fromTime" data-options='{"type":"date","beginYear":2014,"endYear":2016}' class="btn mui-btn mui-btn-block aa">起始时间</button>
					<span class="To">至</span>
					<button id='toTime' name="toTime" data-options='{"type":"date","beginYear":2014,"endYear":2016}' class="btn mui-btn mui-btn-block aa">结束时间</button>
				</div>
				
			</div>
			<div class="mui-content-padded measureData">
				<div class="card">
					<ul class="table-view" id="tableView">
						
					</ul>
			</div>
			</div>
			<div class="backTop"></div>
		</div>
		
		<script>
			(function($) {
				$.init();
				var btns = $('.btn');
				btns.each(function(i, btn) {
					var result = $('.aa')[i];
					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							result.innerText = rs.text;
							search();
							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							picker.dispose();
						});
					}, false);
				});
			})(mui);
		function search(){
			$.ajax({
				type: "POST",
	            url: "${URL_WECHAT_SEARCHBLOODSUGAR}",
	            data: {fromTime:$("#fromTime").html(), toTime:$("#toTime").html(),IDCard:$("#IDCard").val()},
	            dataType: "json",
	            success:function(data){
	            	if(data.success == true){
	            		var arr = data.data;
	            		if(arr.length == 0){
	            			$("#tableView").html("");
	            		}else{
	            			refreshTable(arr);
	            		}
	            	}else{
	            		alert("查询数据失败");
	            	}
	            }
			});
		}
		$(function () {
			search();
		});
		function refreshTable(arr){
			var tempday = "";
			var temptime ="";
			var html = "";
			for(var i=0;i<arr.length;i++){
				var pic = "";
				var stand = "";
				if(tempday != arr[i].dayTime && tempday != ""){
					html+='</table></li>';
				}
				if(arr[i].testItemCode == '105001'){
					pic = "beforeSugar";
				}else if(arr[i].testItemCode == '105002'){
					pic = "afterSugar";
				}
				if(arr[i].standard=='1'){
					stand = "lower";
				}else if(arr[i].standard=='0'){
					stand = "higher";
				}
				if(arr[i].dayTime != tempday){
					html+='<li class="view-cell"><div class="view-date"><h5 class="cell-date">'+arr[i].dayTime
					+'</h5><span></span></div><table><tr><td>'+arr[i].hourTime+'</td><td class="'+pic+'">'+arr[i].testItemName
					+'</td><td>'+arr[i].testValue+'</td><td class="'+stand+'"></td></tr>';
				}else if(arr[i].dayTime == tempday && arr[i].hourTime == temptime){
					html+='<tr><td></td><td class="'+pic+'">'+arr[i].testItemName+'</td><td>'+arr[i].testValue+'</td><td class="'+stand+'"></td></tr>';
				}else if(arr[i].dayTime == tempday && arr[i].hourTime != temptime){
					html+='<tr><td>'+arr[i].hourTime+'</td><td class="'+pic+'">'+arr[i].testItemName+'</td><td>'+arr[i].testValue+'</td><td class="'+stand+'"></td></tr>';
				}
				tempday = arr[i].dayTime;
				temptime = arr[i].hourTime;
			}
			$("#tableView").html(html+'</table></li>');
		}
		</script>
	</body>

</html>